<template>
  <div :class="styles['await-pick']">
    <el-radio-group v-model="currentRadio" @change="handleRadio">
      <el-radio-button v-for="radio in radioBtnList" :key="radio.value" :value="radio.value" :label="radio.label"/>
    </el-radio-group>
    <OutStoreList class="ato-mt-12" :cardStatus="currentRadio" v-if="currentRadio === 1" key="1" @batchPinkOutStore="batchPinkOutStore"/>
    <OutStoreList class="ato-mt-12" :cardStatus="currentRadio" v-if="currentRadio === 2" key="2"/>
    <el-drawer v-model="detail.open" :with-header="false" size="100%" destroy-on-close :show-close="false" :close-on-press-escape="false">
      <PickingListDetail @close="detail.open = false" :rows="detail.rows" :info="detail.info"/>
    </el-drawer>
  </div>
</template>

<script setup name="AwaitPick">
import {reactive, ref} from 'vue'
import PickingListDetail from './PickingListDetail'
import { OutStoreList } from '@/components'
import {batchPickOutApi} from '@/service/outStore'
import {orderTypeMap, sendTypeMap, cardStatusMap} from '@/common/statusMap'

// button切换组
const radioBtnList = [
  {label: '①待拣货订单列表', value: 1},
  {label: '②待回填确认拣货出仓订单列表', value: 2}
]
// 当前Radio
const currentRadio = ref(1)

// 详情页
const detail = ref({
  open: false,
  rows: [],
  info: {}
})

// 切换Radio
function handleRadio (val) {
  currentRadio.value = val
}

async function batchPinkOutStore (selectedRows) {
  const res = await batchPickOutApi({
    cardStatus: 1,
    cardId: selectedRows.map(item => item.cardId)
  })
  if (res.code === __code) {
    detail.value = {
      open: true,
      info: res.data,
      // 转换数据
      rows: selectedRows.map(item => {
        item.orderType = orderTypeMap[item.orderType]
        item.sendType = sendTypeMap[item.sendType]
        item.cardStatus = cardStatusMap[item.cardStatus]
      })
    }
  }
}

</script>

<style lang="less" src="./index.less" module="styles"></style>
